const NAME_MAX_LENGTH = 6;
//柱状图
export const OPTION_BAR = {
    getOpts(xName, data) {
        let opts = {
            grid: {
                top: '8%',
                bottom: '30%',
                left: '13%',
                right: '5%',
            },
             tooltip: {
                trigger: 'axis',
                textStyle: {
                    color: "#FFFFFF",
                    fontSize: 14,
                    align: "left",
                },
                confine: true,
            },
            xAxis: {
                data: xName,
                nameTextStyle: {
                    overflow: 'truncate'
                },
                axisLine: {
                    lineStyle: {
                        color: "#247ED3",
                    },
                },
                axisLabel: {
                    color: "#A4C7F1",
                    fontSize: 13,
                    rotate: 30,
                    formatter(a) {
                        return a.substring(0,NAME_MAX_LENGTH);
                    }
                },
            },
            yAxis: {
                nameTextStyle: {
                    color: "#A4C7F1",
                    fontSize: 14,
                },
                axisLine: {
                    lineStyle: {
                        color: "#247ED3",
                    },
                },
                axisLabel: {
                    color: "#A4C7F1",
                    fontSize: 14,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "#3E508C",
                        type: 'dashed'
                    },
                },
            },
            series: [{
                name:'值',
                type: "bar",
                barWidth: 15,
                itemStyle: {
                    normal: {},
                },
                label: {
                    normal: {
                        show: true,
                        fontSize: 12,
                        color: "#ffffff",
                        position: "top",
                        formatter(a) {
                            return a.value.toLocaleString();
                        }
                    },
                },
                data: data,
            }]
        };
        return opts;
    }
};

//线性图
export const OPTIONS_LINE = {
    getOpts(legendName, XName, datas) {
        let colors = ["#00FF9E", "#A0A857", "#FF4000"];
        let thisDatas = [];
        legendName.map((item, index) => {
            thisDatas.push({
                symbol: 'circle',
                symbolSize: 12,
                smooth: true,
                name: item,
                type: "line",
                yAxisIndex: 1,
                data: datas[index],
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        color: colors[index],
                    },
                },
                label: {
                    normal: {
                        show: true,
                        fontSize: 12,
                        color: "#ffffff",
                        position: "top",
                        formatter(a) {
                            return a.value.toLocaleString();
                        }
                    },
                },
            });
        });
        let opts = {
            grid: {
                left: "8%",
                top: "12%",
                bottom: "25%",
                right: "5%",
            },
            tooltip: {
                trigger: 'axis',
                textStyle: {
                    color: "#FFFFFF",
                    fontSize: 14,
                    align: "left",
                },
                confine: true,
            },
            legend: {
                top: 0,
                type: "scroll",
                data: legendName,
                itemWidth: 18,
                itemHeight: 12,
                textStyle: {
                    color: "#00ffff",
                    fontSize: 14,
                },
            },
            xAxis: [{
                type: "category",
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#6A989E",
                    },
                },
                axisLabel: {
                    inside: false,
                    rotate: 30,
                    textStyle: {
                        color: "#A4C7F1",
                        fontSize: 14,
                        lineHeight: 22,
                    },
                    formatter(a) {
                        return a.substring(0,NAME_MAX_LENGTH);
                    }
                },
                data: XName,
            },],
            yAxis: [{
                type: "value",
                position: "right",
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "#3E508C",
                        type: 'dashed'
                    },
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
            },
            {
                type: "value",
                position: "left",
                nameTextStyle: {
                    color: "#00FFFF",
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: "dashed",
                        color: "rgba(135,140,147,0.8)",
                    },
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    formatter: "{value}个",
                    color: "#fff",
                    fontSize: 12,
                },
            },
            ],
            series: thisDatas,
        };
        return opts;
    }
};

//南丁格尔玫瑰图
export const RIGHT_2_1_OPS = {
    grid: {
        left: 0,
        top: "1%",
        right: "10%",
        bottom: "1%",
    },
    tooltip: {
        trigger: "item",
        formatter: "{b} : {c} ({d}%)",
    },
    legend: {
        type: "scroll",
        orient: "vertical",
        right: "2%",
        align: "right",
        top: "middle",
        textStyle: {
            color: "#FFFFFF",
        },
    },
    series: [{
        type: "pie",
        percentPrecision: 2,
        radius: "60%",
        center: ["40%", "55%"],
        color: ["#58CDFF", "#47FF65", "#FFDE67", "#FF9063"],
        data: [],
        label: {
            normal: {
                formatter: "{c|{c}次}/{d|{d}%}",
                rich: {
                    c: {
                        fontSize: 15,
                        lineHeight: 5,
                    },
                    d: {
                        // color: "#FFF",
                        fontSize: 15,
                        height: 40,
                    },
                },
            },
        },
        labelLine: {
            normal: {
                smooth: 0.2,
                length: 10,
                length2: 30,
                lineStyle: {
                    width: 2,
                }
            },
        },
        itemStyle: {
            normal: {
                shadowColor: "rgba(0, 0, 0, 0.8)",
                shadowBlur: 50,
            },
        },
    }]
}

//2个柱状图
export const OPTIONS_TOW_BAR = {

    getOpts(xName, data1, data2) {
        let opts = {
            grid: {
                top: '3%',
                bottom: '20%',
                left: '15%',
                right: '15%'
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                },
            },
            xAxis: [{
                type: "category",
                data: xName,
                axisLine: {
                    lineStyle: {
                        color: '#384B8B',
                        width: 2,
                    },
                },
                axisLabel: {
                    textStyle: {
                        color: "#A4C7F1",
                    },
                    rotate: 30,
                },
                axisTick: {
                    show: false,
                },
                z: 10,
            },],
            yAxis: [{
                nameLocation: "middle",
                nameGap: 35,
                axisLabel: {
                    textStyle: {
                        color: "#A4C7F1",
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#384B8B',
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: "dashed",
                        color: "rgba(135,140,147,0.8)",
                    },
                },
                axisTick: {
                    show: false,
                },
                type: "value",
            },],
            series: [{
                name: '受理用时',
                type: "bar",
                barCategoryGap: '10',
                data: data1,
                barWidth: 10,
                itemStyle: {
                    normal: {
                        color: '#0342FF',
                    },
                },
                label: {
                    normal: {
                        show: true,
                        fontSize: 12,
                        color: "#ffffff",
                        position: "top"
                    },
                },
            },
            {
                name: '完工用时',
                type: "bar",
                barCategoryGap: '10',
                data: data2,
                barWidth: 10,
                itemStyle: {
                    normal: {},
                },
                label: {
                    normal: {
                        show: true,
                        fontSize: 12,
                        color: "#ffffff",
                        position: "top"
                    },
                },
            }
            ]
        }
        return opts;
    }
}

//本年承修的单位工作量
export const OPTIONS_CXDW_BAR = {
    getOpts(result) { 
        let opts = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                textStyle: {
                    color: "#BCE9FC",
                    fontSize: 14,
                    align: "left",
                },
                confine: true,
            },
            grid: {
                left: '50',
                right: '16%',
                top: '5%',
                bottom: '5%',
            },
            xAxis: { show: false },
            yAxis: [
                {
                    splitLine: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    type: 'category',
                    axisTick: {
                        show: false,
                    },
                    inverse: true,
                    data: result.map(el => {
                        return el.name
                    }),
                    axisLabel: {
                        color: '#fff',
                        fontSize: 14,
                        margin: 10,
                        formatter: (name, index) => {
                            const id = index + 1;
                            if (id < 4) {
                                return `{icon${id}|${id}}`;
                            } else {
                                return `{count|${id}}`;
                            }
                        },
                        rich: {
                            icon1: {
                                align: 'center',
                                color: '#FF6900',
                                fontSize: 20,
                            },
                            icon2: {
                                align: 'center',
                                color: '#00FF9E',
                                fontSize: 20,
                            },
                            icon3: {
                                align: 'center',
                                color: '#00F9FF',
                                fontSize: 20,
                            },
                            count: {
                                align: 'center',
                                color: '#00A3FF',
                                fontSize: 20,
                            }
                        },
                    },
                },
                {
                    type: 'category',
                    inverse: true,
                    axisTick: 'none',
                    axisLine: 'none',
                    show: true,
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                            padding: [0, 0, 5, 0],
                        },
                        formatter: function (value) {
                            return value + '个';
                        },
                    },
                    data: result.map((item) => item.value),
                },
            ],
            series: [
                {
                    name: '工作量',
                    type: 'bar',
                    barWidth: 10, // 柱子宽度
                    showBackground: true,
                    backgroundStyle: {
                        color: '#194B72',
                        barBorderRadius: 30,
                    },
                    color: '#00A0E9',
                    label: {
                        show: true,
                        offset: [5, -13],
                        color: '#fff',
                        position: 'left',
                        align: 'left',
                        formatter: function (params) {
                            return params.data.name;
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#00DEFF',
                            barBorderRadius: 30,
                        },
                    },
                    data: result
                }
            ],
        };
        return opts;
    }
}

//本月个人维修量
export const OPTIONS_GRWXL_BAR = {
    getOpts(result) {
        let opts = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                textStyle: {
                    color: "#BCE9FC",
                    fontSize: 14,
                    align: "left",
                },
                confine: true,
            },
            grid: {
                left: '50',
                right: '16%',
                top: '5%',
                bottom: '5%',
            },
            xAxis: { show: false },
            yAxis: [
                {
                    splitLine: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    type: 'category',
                    axisTick: {
                        show: false,
                    },
                    inverse: true,
                    data: result.map(el => {
                        return el.name
                    }),
                    axisLabel: {
                        color: '#fff',
                        fontSize: 14,
                        margin: 10,
                        formatter: (name, index) => {
                            const id = index + 1;
                            if (id < 4) {
                                return `{icon${id}|${id}}`;
                            } else {
                                return `{count|${id}}`;
                            }
                        },
                        rich: {
                            icon1: {
                                align: 'center',
                                color: '#FF6900',
                                fontSize: 20,
                            },
                            icon2: {
                                align: 'center',
                                color: '#00FF9E',
                                fontSize: 20,
                            },
                            icon3: {
                                align: 'center',
                                color: '#00F9FF',
                                fontSize: 20,
                            },
                            count: {
                                align: 'center',
                                color: '#00A3FF',
                                fontSize: 20,
                            }
                        },
                    },
                },
                {
                    type: 'category',
                    inverse: true,
                    axisTick: 'none',
                    axisLine: 'none',
                    show: true,
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                            padding: [0, 0, 5, 0],
                        },
                        formatter: function (value) {
                            return value + '个';
                        },
                    },
                    data: result.map((item) => item.value),
                },
            ],
            series: [
                {
                    name: '维修量',
                    type: 'bar',
                    barWidth: 10, // 柱子宽度
                    showBackground: true,
                    backgroundStyle: {
                        color: '#194B72',
                        barBorderRadius: 30,
                    },
                    color: '#00A0E9',
                    label: {
                        show: true,
                        offset: [5, -13],
                        color: '#fff',
                        position: 'left',
                        align: 'left',
                        formatter: function (params) {
                            return params.data.name;
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#00DEFF',
                            barBorderRadius: 30,
                        },
                    },
                    data: result
                }
            ],
        };
        return opts;
    }
}

//返回面积图
export const OPTION_MJT = {
    getOpts(TCcolor, pointColor, xName, XData, unit) {
        let opts = {
            grid: {
                top: "15%",
                left: "6%",
                right: "6%",
                bottom: "1%",
                containLabel: true,
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                textStyle: {
                    color: "#BCE9FC",
                    fontSize: 14,
                    align: "left",
                },
                confine: true,
            },
            xAxis: [{
                type: "category",
                boundaryGap: false,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#5F6DA0",
                        type: 'solid'
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: "#A4C7F1",
                        margin: 15,
                        fontSize: 14,
                    },
                    rotate: 30
                },
                axisTick: {
                    show: false
                },
                data: xName,
            },],
            yAxis: [{
                type: "value",
                min: 0,
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: "dashed",
                        color: "rgba(135,140,147,0.8)",
                    },
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#5F6DA0",
                        type: 'solid'
                    },
                },
                axisLabel: {
                    margin: 20,
                    textStyle: {
                        color: "#A4C7F1",
                        fontSize: 14,
                    },
                    formatter: "{value}" + (unit ? unit : ''),
                },
                axisTick: {
                    show: false
                },
            },],
            series: [{
                name: "值",
                type: "line",
                smooth: true,
                symbol: 'circle',
                symbolSize: 14,
                itemStyle: {
                    normal: {
                        color: pointColor,
                        borderWidth: 2,
                        borderColor: "#FFF"
                    },
                },
                lineStyle: {
                    normal: {
                        color: "#3deaff", // 线条颜色
                    },
                },
                areaStyle: {
                    //区域填充样式
                    normal: {
                        color: TCcolor,
                        shadowColor: "rgba(53,142,215, 0.9)",
                        shadowBlur: 20,
                    },
                },
                label: {
                    normal: {
                        show: true,
                        fontSize: 12,
                        color: "#ffffff",
                        position: "top",
                        formatter(a) {
                            if (unit) {
                                return a.value + unit;
                            }
                            return a.value.toLocaleString();
                        }
                    },
                },
                data: XData,
            }]
        };
        return opts;
    }
}